<template>
<div class="content_base temp3">
              <!-- 筛选信息 -->
       <div class="fun2">
            <el-form ref="form" :model="seleform" >
               <el-form-item label="选择月份：" label-width="120px">
                  <el-date-picker
                    v-model="seleform.reportDate"
                    type="month"
                    placeholder="默认本月"
                    class="timeByM"
                    @change="getData(leval)"
                    value-format="yyyyMM"
                   >
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="所在设区市：" v-if="leval==3" label-width="130px">
                    <!-- <span class="span1">（含省直管县）</span> -->
                   <el-select v-model="seleform.city" filterable placeholder="选择所在设区市" @change="disCity(tableData1,seleform),getData(leval),seleform.county=seleform.dikeName=seleform.inRivers=''" clearable>
                     <el-option v-for="(item,index) in cityArr" :key="index" :label="item" :value="item"></el-option>
                   </el-select>
                 </el-form-item>
                 <el-form-item label="所在县：" v-if='leval!=1' label-width="100px" >
                     <!-- <span class="span2">（市，区）</span> -->
                   <el-select v-model="seleform.county" filterable placeholder="选择所在县" @change="disCity(tableData1,seleform),getData(leval),seleform.dikeName=seleform.inRivers=''" clearable>
                      <el-option v-for="(item,index) in countyArr" :key="index" :label="item" :value="item"></el-option>
                   </el-select>
                 </el-form-item>
                 <el-form-item label="圩堤名称：" label-width="120px">
                   <el-select v-model="seleform.dikeName" filterable placeholder="选择圩堤名称" @change="disCity(tableData1,seleform),getData(leval),seleform.inRivers=''" clearable>
                     <el-option v-for="(item,index) in dikeNameArr" :key="index" :label="item" :value="item"></el-option>
                   </el-select>
                 </el-form-item>
                 <el-form-item class="funBtn" label-width="0px">
                    <el-button type="primary" icon="el-icon-search" class="btn1" @click="getData(leval)">查询</el-button>
                    <el-button type="primary" icon="iconfont icon-xiazai" class="btn1" @click="download">下载</el-button>
                 </el-form-item>
            </el-form>
      </div>
                <!-- 数据展示的表格 -->
       <div id="table2">
          <template>
              <el-table
                :data="tableData"
                style="width: 100%"
                stripe
                >
                    <!-- 展示的 -->
                 <el-table-column
                     label="序号"
                     width="60"
                     prop="orderNumber"
                     >
                   </el-table-column>
                 <el-table-column
                     label="圩堤名称"
                     width=180
                     >
                     <template slot-scope="scope">
                       <el-button
                         type="text"
                         @click="toDetial(scope.row)">{{scope.row.dikeName}}</el-button>
                     </template>
                   </el-table-column>
                   <el-table-column
                     label="所在设区市"
                     prop="city">
                   </el-table-column>
                   <el-table-column
                     label="属地"
                     prop="county">
                   </el-table-column>
                   <el-table-column
                     label="所在河流"
                     prop="inRivers">
                   </el-table-column>
                   <el-table-column
                     label='堤线长度(km)'
                     prop='dikeLength'
                      >
                   </el-table-column>
                   <el-table-column
                     label='治理长度(km)'
                     prop='governDiskLength'
                      >
                   </el-table-column>
                   <!-- 省级的操作 -->
                  <el-table-column
                    label="操作"
                    v-if="leval==3"
                    width=300
                    class="btnParent"
                    >
                    <template slot-scope="scope">
                      <el-button
                        size="small"
                        @click="toDetial(scope.row)"
                        v-if="scope.row.state==3"
                        >审批</el-button>
                      <el-tag
                      :type="scope.row.state|statecol"
                      v-else
                      disable-transitions>{{scope.row.state|state3}}</el-tag>  
                      <el-button
                        class="btnChild"
                        size="small"
                        @click="upToEdit(scope.$index, scope.row)"
                        >编辑</el-button> 
                    </template>
                  </el-table-column>
                  <!-- 市级的操作 -->
                  <el-table-column
                    label="操作"
                    v-else-if="leval==2"
                    width=200
                    class="btnParent"
                    >
                    <template slot-scope="scope">
                      <el-button
                        size="small"
                        @click="toDetial(scope.row)"
                        v-if="scope.row.state==2"
                        >审批</el-button>
                      <el-tag
                      :type="scope.row.state|statecol"
                      v-else
                      disable-transitions>{{scope.row.state|state2}}</el-tag>  
                    </template>
                  </el-table-column>
                  <!-- 县级的操作 -->
                  <el-table-column
                   label="上报"
                   v-else
                   width=200
                   >
                 <template slot-scope="scope">
                    <el-button
                     v-if="scope.row.state==null||scope.row.state==0||scope.row.state==1||scope.row.state==-1"
                     size="small"
                     @click="upToEdit(scope.$index, scope.row)">{{scope.row.state|state1}}</el-button>
                    <el-tag
                      :type="scope.row.state|statecol"
                      v-else
                      disable-transitions>{{scope.row.state|state1}}</el-tag>
                 </template>
                </el-table-column>
              </el-table>  
            </template>  
      </div>
      <div class="page">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="seleform.currentPage"
          :page-sizes="[20, 30, 40, 50]"
          :page-size="seleform.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalSize">
        </el-pagination>
      </div>
      <el-footer class="footer">Copyright&copy;2018江西省水利科学研究院|江西鄱水信息科技有限公司</el-footer>
   </div>
            
            
</template>

<script>
export default {
    data(){
        return{
            //表格数据
            tableData:[],
            //
            tableData1:[],
            //存储初次可以操作的数据
            tableData3:[],
           
           //省县的操作---是否可见---所有的
            isCZbyX:false,
            isCZbyS:false,
            resultRVisible:false,//驳回的弹框
            resultR:'',//驳回的理由
            //查询条件的列表及进度信息
           seleform:{
            city:'',
            county:'',
            dikeName:'',
            inRivers:'',
            currentPage:1,
            pageSize:20,
            reportDate:''
            },
            totalSize:10,
        //当前用户的信息
         leval:'',
         unitMessage:'',
        //功能区的联级选择
          cityArr:[],
          countyArr:[],
          dikeNameArr:[],
          inRiversArr :[],
          //计算数据
          num:0,
          //时间判断，今天的时间是否是五号
          // defByTime5:true,
          // defByTime8:true,
          defByTime:true,
          // Today:'',//-----今天的时间
      }
    },
    methods:{
        //获取今天的时间，小于五号true
        getToday(){
          var _this=this
          var thisDate = (new Date()).getTime()
          this.$axios.get('/utilcontroller /getData',{params:{
            thisDate:thisDate
          }}).then(function(res){
                var data = res.data.responseData;
                _this.seleform.reportDate = data.substr(0,6)
                // _this.Today = data.substr(0,6)
                // var getday = data.substr(6,2)
                //  _this.defByTime5 = getday<='13'?true:false
                //  _this.defByTime8 = getday<='16'?true:false
                 _this.getData(_this.leval)       
          }).catch(function(err){
            console.log(err)
          })
        },
        //根据时间改变state状态
        changeState(leval,tableData){
             //获取时间
             var _this = this
             var thisDate = (new Date()).getTime()
              this.$axios.get('/utilcontroller /getData',{params:{
                 thisDate:thisDate
               }}).then(function(res){
                    var data = res.data.responseData;
                    var Mouth = data.substr(0,6)//201810
                    var Today = data//20181009
                    var armday = leval=='1'?Mouth+'13':Mouth+'16' 
                     _this.defByTime = Today>armday?true:false
                    if(_this.defByTime){
                       if(leval==1){
                          for(var i=0;i<tableData.length;i++){
                            tableData[i].state = tableData[i].state==1||tableData[i].state==null?'5':tableData[i].state
                         }
                       }else if(leval==2){
                         for(var i=0;i<tableData.length;i++){
                           tableData[i].state = tableData[i].state==2&&tableData[i].rejected===0?'5':tableData[i].state
                         }
                       }
                      //  else if(leval==3){
                      //    for(var i=0;i<tableData.length;i++){
                      //       tableData[i].state = tableData[i].state==3?'5':tableData[i].state
                      //    }
                      //  }
                     } 
              }).catch(function(err){
                console.log(err)
              })
            },
        //获得初始审批数据或者上报数据
        getData(){  
               var _this = this
               var thisDate = (new Date()).getTime()
               this.seleform.thisDate =  thisDate
               this.$axios.get('/dikeInfo/getcurrentdikeinfo/PRE1',{params:this.seleform}).then(function(res){
                 var codeMes = res.data.responseCode
                 if(codeMes=='101'){
                         _this.$router.push({name:'login'})
                   }else{
                     if(res.data.responseData){
                        var data = res.data.responseData.dataList
                        _this.tableData = data;
                        _this.totalSize = res.data.responseData.page.totalSize
                     }else{
                        _this.tableData = []
                        _this.totalSize=0
                     }
                      _this.disCity(_this.tableData,_this.seleform)
                     //改变状态-----超时上报为5
                     //  _this. changeState(_this.leval,_this.tableData)
                  }
               }).catch(function(err){
                 console.log(err)
             })  
        },
        //页面跳转
       handleSizeChange(val) {
        this.seleform.pageSize = val;
        this.getData()
      },
      handleCurrentChange(val) {
        this.seleform.currentPage = val;
        this.getData();
      },
        //跳转到填写数据的页面
        upToEdit(index,row){
           var dikeCode = row.dikeCode
          if(this.leval==3){
             this.$router.push({name:'preUpToS',params:{
            'dikeCode':dikeCode,
              }})    
          }else{
            this.$router.push({name:'preUpTo',params:{
            'dikeCode':dikeCode,
          }})
          }
          
        },
        //点击跳转到详细页面
        toDetial(row){
          console.log(row)
          var _this = this
          var dikeCode = row.dikeCode
          this.$router.push({name:'preDetial',params:{
              'dikeCode':dikeCode,
              'reportDate':_this.seleform.reportDate
          }})
        },
        //下载进度表
        download(){
         window.open(`${this.$axios.defaults.baseURL}/projectearly/exportproearlyexcel`,'_self')
        },
      //数组去重
       disChon(arr){
           var newArr =[]; 
          for(var i=0;i<arr.length;i++){
              var def = true
            for(var j=i+1;j<arr.length;j++){
              if(arr[i] ==arr[j]){
                  def = false;
                 }
            }if(def){
              newArr.push(arr[i] )
            }
         } 
         return newArr;
       },
       //分级选择-----连级
       disCity(tableData,seleform){
          var cityArr = [];
          var countyArr = [];
          var dikeNameArr =[];
          var inRiversArr =[];
          //选择市级
          for(var i=0;i<tableData.length;i++){
                cityArr.push(tableData[i].city)
          }
          this.cityArr =this.disChon(cityArr);
          //选择城市确定县级
         if(seleform.city){
             for(var i=0;i<tableData.length;i++){
               if(tableData[i].city==seleform.city){
                 countyArr.push(tableData[i].county)
               }
             }
         }else{
           for(var i=0;i<tableData.length;i++){
             countyArr.push(tableData[i].county);
           }
         }
         this.countyArr = this.disChon(countyArr)
         //确定名称
         if(seleform.county && seleform.city){

           for(var i=0;i<tableData.length;i++){
                if(tableData[i].city==seleform.city && tableData[i].county.indexOf(seleform.county!=-1)){
                  dikeNameArr.push(tableData[i].dikeName)
                }
           }
           }else if(seleform.county||seleform.city){
                var forDikeName = seleform.county||seleform.city;
                for(var i=0;i<tableData.length;i++){
                  if(tableData[i].county==forDikeName||tableData[i].city==forDikeName){
                     dikeNameArr.push(tableData[i].dikeName)
                  }
                } 
            }else{
              for(var i=0;i<tableData.length;i++){
                   dikeNameArr.push(tableData[i].dikeName)
              }
        }
            this.dikeNameArr=this.disChon(dikeNameArr)

       }, 
       
    },
    created(){
        //获取用户等级
         var storage = window.localStorage;
         this.leval =storage.getItem('level')
         this.unitMessage = storage.getItem('unitMessage');
         var _this=this
        this.getToday()
        this.getData(this.leval)
        this.isCZbyS = this.leval==1?false:true
       
    },
    mounted(){
      
    },
  

   
}
</script>

<style>
/* .content_base{
    margin-left:10px;
    background:#fff;
    height: auto;
    min-height: 100%;
    margin-top:10px;
     width: 100%;
  } */
 #table2 .el-table th{
      text-align: center!important
  }
 #table2 .el-form-item__label{
     text-align:left!important;
     width:180px;
 }
#table2 .el-form-item__content{
    /* width:50%!important; */
    text-align:left;
}
 #table2{
   padding:20px
 }

       /* fun部分 */
.fun2{
  height: 85px;
  /* background: #f0ffff */
}
.fun2 .el-form-item{
    width:350px;
    position: relative;
    padding-left:20px;
    float:left;
   
}
.fun2 .el-date-editor{
  width: 130px!important;
}

.resen .el-dialog{
  width:700px
}
.resen .el-textarea__inner{
  height: 200px;
}


</style>
<style scoped>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }

.fun2 {
    height:100px;
    line-height: 100px;
    position: relative;
  }

.fun2 .el-form-item{
   /* width:19%!important; */
    width:250px;
    position: relative;
    padding-left:10px;
    float:left;
    margin-top:22px
}
.fun2 .el-form-item__label{
   
    width:108px;
    text-align:left!important;
}
.fun2 .span1{
    position: absolute;
    top:20px;
    left:-108px;

} 
.fun2 .span2{
    position: absolute;
    top:20px;
    left:-80px;
} 
.fun2 .el-form-item__content{
    text-align:left
}
.fun2 .el-button--primary {
  float: left;
  margin-left:20px;
}
.funBtn{
  width:220px!important;
}
.funBtn .el-form-item__content{
  width:200px!important;
}
.btnParent{
  position: relative;
}
.btnChild{
  position: absolute;
  right: 20px;
}
.link{
  background:#409EFF;
  display: inline-block;
  width: 84px;
  height: 40px;
  margin-top:22px;
}
.span1,.span2{
  font-size:14px;
  color:#606266
}
.page{
  height:100px;
  margin-top:40px;
  text-align:right;
  padding-right:50px;
}
</style>







